<template>
  <div class="more1">
    <title1 tit="收藏"></title1>
    <div class="more-nav">
      <span class="more-nav1">新增缴费</span><span class="more-nav2">城市</span>
    </div>
    <div class="more2">
      <!-- 自定义九宫格 -->
      <van-grid square icon-color="red" column-num="3">
        <van-grid-item text="水费" >
          <van-icon class="iconfont icon-water" class-prefix="icon" slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="电费" @click="go('dianfei')">
          <van-icon
            class="iconfont icon-dianfei"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="燃气费" @click="go('ranqi')">
          <van-icon
            class="iconfont icon-ranqifei"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
      <van-grid square column-num="3">
        <van-grid-item text="有线电视"  @click="go('dianshi')">
          <van-icon
            class="iconfont icon-youxiandianshijiaofei"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="暖气费" @click="go('nuanqi')">
          <van-icon
            class="iconfont icon-taiyang"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
        <van-grid-item text="宽带" @click="go('wangfei')">
          <van-icon
            class="iconfont icon-kuandai"
            class-prefix="icon"
            slot="icon"
            ><div class="radio"></div
          ></van-icon>
        </van-grid-item>
      </van-grid>
    </div>
    <div class="more-foot">
      <span>缴费代扣 </span><span>|</span><span>账户管理 </span><span>|</span><span>帮助中心</span>
    </div>
  </div>
</template>

<script>
import title1 from "../../../components/tit.vue";
export default {
  components: {
    title1,
  },
  methods: {
    goback() {
      this.$router.replace({ name: "LifeService" });
    },
    go(page){
      this.$router.replace({name:page})
    }
  },
};
</script>

<style lang="less" scoped>
.more1 {
  width: 100%;
  height: 100%;
  .more2 {
    box-shadow: 0 0 9px 2px #999;
    background-color: #ffff;
    margin: 20px;

    .iconfont {
      font-size: 60px;
      color: red;
      border-block-color: #ffff;
    }
  }
  .more-nav {
    background-color: #fff;
    margin: 20px;
    box-shadow: 0 0 9px 2px #999;
    span {
      display: inline-block;
      font-size: 26px;
      color: #000000;
    }
    .more-nav2 {
      margin-left: 70%;
      color: orangered;
    }
    .more-nav1 {
      margin-left: 20px;
    }
  }
  .more-foot {
    font-size: 26px;
    text-align: center;
    span {
        padding: 20px;
    }
  }
}
</style>
